<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ueditor图片对话框</title>
  <script type="text/javascript" src="../internal.js"></script>

  <!-- jquery -->
  <script type="text/javascript" src="../../third-party/jquery-3.2.1.min.js"></script>

  <!-- webuploader -->
  <script src="../../third-party/webuploader/webuploader.min.js"></script>
  <link rel="stylesheet" type="text/css" href="../../third-party/webuploader/webuploader.css">

  <!-- image dialog -->
  <link rel="stylesheet" href="image.css" type="text/css" />
  <script src="../../plupload/plupload.full.min.js"></script>
</head>
<body>

<div class="wrapper">
  <div id="tabhead" class="panel tabhead focus">
    <span class="tab focus" data-content-id="remote"><var id="lang_tab_remote"></var></span>
    <!--<span class="tab focus" data-content-id="upload"><var id="lang_tab_upload"></var></span>-->
    <!--<span class="tab" data-content-id="online"><var id="lang_tab_online"></var></span>-->
    <!--<span  data-content-id="search"><var id="lang_tab_search"></var></span>-->
  </div>
  <div class="alignBar">
    <label class="algnLabel"><var id="lang_input_align"></var></label>
                    <span id="alignIcon">
                        <span id="noneAlign" class="none-align focus" data-align="none"></span>
                        <span id="leftAlign" class="left-align" data-align="left"></span>
                        <span id="rightAlign" class="right-align" data-align="right"></span>
                        <span id="centerAlign" class="center-align" data-align="center"></span>
                    </span>
    <input id="align" name="align" type="hidden" value="none"/>
  </div>
  <div id="tabbody" class="tabbody">

    <!-- 远程图片 -->
    <div id="remote" class="panel">
      <div class="top">
        <div class="row">
          <label for="url"><var id="lang_input_url"></var></label>
          <span><input class="text" id="url" type="text"/></span>
        </div>
      </div>
      <div class="left">
        <div class="row">
          <label><var id="lang_input_size"></var></label>
          <span><var id="lang_input_width">  </var><input class="text" type="text" id="width"/>px </span>
          <span><var id="lang_input_height">  </var><input class="text" type="text" id="height"/>px </span>
          <span><input id="lock" type="checkbox" disabled="disabled"><span id="lockicon"></span></span>
        </div>
        <div class="row">
          <label><var id="lang_input_border"></var></label>
          <span><input class="text" type="text" id="border"/>px </span>
        </div>
        <div class="row">
          <label><var id="lang_input_vhspace"></var></label>
          <span><input class="text" type="text" id="vhSpace"/>px </span>
        </div>
        <div class="row">
          <label><var id="lang_input_title"></var></label>
          <span><input class="text" type="text" id="title"/></span>
        </div>
      </div>
      <!--start-->
      <div class="container">
        <form class="form-horizontal" id="form1">
          <div class="form-group" id="upload1">
            <!--<div class="col-xs-9" style="display: none">-->
            <!--<span>-->
            <!--图片地址-->
            <!--</span>-->
            <!--<input type="text" class="form-control" id="photo" name="photo" readonly style="background-color: white">-->
            <!--</div>-->
            <div class="col-xs-9 col-xs-offset-3">
              <span  class="label label-default ">图片文件</span> <span id="file-text">未选择</span><br>
              <a class="btn btn-primary btn-sm" id="select-btn" style="position:relative">添加图片
                <input id="uploadFile" type="file" onchange="uploadImg()" style="z-index:999;font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" accept="image/jpeg,image/gif,image/png,image/bmp">
              </a>
              <!--<button class="btn btn-default btn-sm" id="upload-btn" type="button">上传图片</button>-->

            </div>
            <div class="col-xs-9 col-xs-offset-3 area" style="margin-top: 10px;display: none">
              <div class="progress">
                <div id="upload-progress" class="progress-bar" role="progressbar" aria-valuenow="0"
                     aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
                  0%
                </div>
              </div>
            </div>
            <div class="col-xs-9 col-xs-offset-3 area" style="margin-top: 10px;display: none">
              <span class="label label-danger ">提示</span> <span id="error-text">请先选择文件</span>
            </div>
          </div>
        </form>
      </div>
      <!--end-->
      <div class="right"><div id="preview"></div></div>
    </div>

    <!-- 上传图片 -->
    <div id="upload"  class="panel">
      <div id="queueList" class="queueList" style="display: none">
        <div class="statusBar element-invisible">
          <div class="progress">
            <span class="text">0%</span>
            <span class="percentage"></span>
          </div><div class="info"></div>
          <div class="btns">
            <div id="filePickerBtn"></div>
            <div class="uploadBtn"><var id="lang_start_upload"></var></div>
          </div>
        </div>
        <div id="dndArea" class="placeholder">
          <div class="filePickerContainer">
            <div id="filePickerReady"></div>
          </div>
        </div>
        <ul class="filelist element-invisible">
          <li id="filePickerBlock" class="filePickerBlock"></li>
        </ul>
      </div>
    </div>
  </div>
</div>
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
<script type="text/javascript" src="image.js"></script>
<script type="text/javascript">
        function isIE() {
			   			 if (!!window.ActiveXObject || "ActiveXObject" in window) {
			      			  return true;
			    		} else {
			        		return false;
			    	}
				}
				if (isIE()) {
				    var script = document.createElement('script');
				    script.type = 'text/javaScript';
				     script.src = 'bluebird.min.js';  // bluebird 文件地址
				    document.getElementsByTagName('head')[0].appendChild(script);
				}

</script>
<script>
  /**上传图片**/
 
 	
	  function uploadImg(){
	  
	    var urls = [];
	    var client;
	    var oss={};
	    $.ajax({
	      url:'https://www.bcc.cn/manager/admin/file/getStsToken',
	      method:'post',
	      dataType: 'json',
	      async:false,
	      beforeSend: function(request) {
	        request.setRequestHeader("Authorization", localStorage.getItem('token'));
	      },
	      success:function(data) {
	        console.log(data)
	        oss=data;
	        client = new OSS.Wrapper({
	          region: data.data.endpoint.split('.')[0],
	          secure: true,
	          accessKeyId: data.data.accessKeyId,
	          /*这两者到阿里云控制台获得*/
	          stsToken: data.data.securityToken,
	          accessKeySecret: data.data.accessKeySecret,
	          bucket: data.data.bucketName/*装图片的桶名*/
	        });
	        var files = document.getElementById('uploadFile')
	        if (files.files) {
	          var fileLen = document.getElementById('uploadFile').files
	          let resultUpload = ''
	          for (var i = 0; i < fileLen.length; i++) {
	            var file = fileLen[i]
	            // 随机命名
	            var random_name = random_string(6) + '_' + new Date().getTime() + '.' + file.name.split('.').pop()
						
	            // 上传
	            client.multipartUpload(random_name, file).then(function (result) {
	              console.log(result);
	              var uploadPath=result.res.requestUrls[0].split('?')[0];/*将这段字符串存到数据库即可*/
	              console.log(uploadPath);
	              $('#url').val(uploadPath);
	              $('#preview').html('<img src="'+uploadPath+'" width="260" height="" border="px solid #000" title="">')
	            }).catch(function (err) {
	              console.log(err);
	            });
	
	
	        }
	        }
	      }
	    })
	  }
	  // 随机生成文件名
	  function random_string(len) {
	    len = len || 32;
	    var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
	    var maxPos = chars.length;
	    var pwd = '';
	    for (let i = 0; i < len; i++) {
	      pwd += chars.charAt(Math.floor(Math.random() * maxPos));
	    }
	    return pwd;
	  }




/*  var client;
  var oss={}
  var random_name='';
    function get_oss_sign() {
    /!*
     * 获取阿里云oss直传签名给window.oss_sign
     * oss_sign.make_random_filename(filename)可获取一个随机文件名
     * oss_sign.oss_cdn为文件cdn的url域名
     * *!/
    function get_signature() {
      $.ajax({
        url: 'http://182.150.44.41:9000/bcc-admin/file/getStsToken',
        method:'post',
        dataType: 'json',
        async:false,
        beforeSend: function(request) {
          request.setRequestHeader("token", localStorage.getItem('token'));
        },
        success:function(data) {
          console.log(data)
          oss = data;

          client = new OSS.Wrapper({
            region: 'oss-cn-beijing',
            secure: true,
            accessKeyId: data.accessKeyId,
            /!*这两者到阿里云控制台获得*!/
            stsToken: data.securityToken,
            accessKeySecret: data.accessKeySecret,
            bucket: data.bucketName /!* 装图片的桶名 *!/
          });
        }
    })
    };

      random_name = random_string(6) + '_' + new Date().getTime();/!* + '.' + file.name.split('.').pop()*!/
      function random_string(len) {
        len = len || 32;
        var chars = 'abcdefhijkmnprstwxyz';
        var maxPos = chars.length;
        var pwd = '';
        for (var i = 0; i < len; i++) {
          pwd += chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return pwd;
      }
    get_signature()
  }

  // 实例化上传文件
  var uploader1 = new plupload.Uploader({
    runtimes: 'html5,flash,silverlight,html4',
    browse_button: $("#upload1 #select-btn")[0],
    flash_swf_url: '../../plupload/Moxie.swf',
    silverlight_xap_url: '../../plupload/js/Moxie.xap',
    url:'http://oss.aliyuncs.com',
    multi_selection: true,
    filters: {
      mime_types: [
        { title : "Image files", extensions : "jpg,gif,png,bmp" }
      ],
      max_file_size: '5mb'
    },
    resize: {
      quality: 30
    },
    init: {
      PostInit: function (up) {
        //  $("#upload1 #upload-btn").click(function () {
        //     up.start()
        // });
      },

      FilesAdded: function (up, files) {
        // 只保留最后一个文件
        var file_num = up.files.length;
        if(file_num > 1){
          up.splice(0, file_num - 1) // 移除文件
        }

        $("#upload1 #file-text").text(files[0].name + ' (' + plupload.formatSize(files[0].size) + ')');
        $("#upload1 #upload-progress").parents(".area").hide();
        $("#upload1 #error-text").parents(".area").hide()

        up.start() //直接上传

      },

      BeforeUpload: function (up, file) {
        $("#upload1 #upload-progress").text('0%');
        $("#upload1 #upload-progress").css('width', '0%');
        $("#upload1 #upload-progress").parents(".area").show();

        // 封装请求
        get_oss_sign();  // 如果上传成功，会在阿里云oss客户端创建一个test文件夹，文件在其内部
        random_name = random_name + '.' + file.name.split('.').pop();
        up.setOption({
          'url':'http://'+oss.bucketName+'.oss-cn-beijing.aliyuncs.com/'+random_name,
        });
        client.multipartUpload(random_name, file).then(function (result) {
          console.log(result)
          var uploadPath=result.url;/!*将这段字符串存到数据库即可*!/
          console.log(uploadPath);
          $('#url').val(uploadPath);
        }).catch(function (err) {
          console.log(err);
        });
      },

      UploadProgress: function (up, file) {
        var percent = file.percent + '%';
        $("#upload1 #upload-progress").text(percent);
        $("#upload1 #upload-progress").css("width", percent);

      },

      FileUploaded: function (up, file, info) {
        console.log(up)
        $("#upload1 #error-text").parents(".area").show();
        if (info.status == 200) {
          $("#upload1 #error-text").text("上传完成");
          // $("#upload1 #photo").val(oss_sign.oss_cdn + file.remote_filename)
          // $('#url').val(oss_sign.oss_cdn + file.remote_filename); // 如果有cnd
          $('#url').val(oss_sign.host + '/' + file.remote_filename); // 如果没cnd
        }
        else {
          $("#upload1 #error-text").text("上传出现未知错误，请联系管理员");
        }
      },

      Error: function (up, err) {
        $("#upload1 #error-text").parents(".area").show();
        if (err.code == -600) {
          $("#upload1 #error-text").text("选择的文件太大了");
        }
        else if (err.code == -601) {
          $("#upload1 #error-text").text("传文件类型不正确");
        }
        else if (err.code == -602) {
          $("#upload1 #error-text").text("这个文件已经上传过一遍了");
        }
        else {
          $("#upload1 #error-text").text("未知错误，请联系管理员");
        }
      }
    }
  });

  uploader1.init();*/

</script>
</body>
</html>

